<template>
    <el-container>
        <el-aside style="width: 200px;margin-top: 20px">
            <switch></switch>
            <SideMenu @indexSelect="listByCategory" ref="sideMenu"></SideMenu>
        </el-aside>
        <el-main>
            <books class="books-area" ref="booksArea"></books>
        </el-main>
    </el-container>
</template>

<script>
    import SideMenu from './SideMenu'
    import Books from './Books'
    import {getCurrentInstance} from "vue";

    export default {
        name: 'AppLibrary',
        components: {Books, SideMenu},
        setup() {
            let {proxy} = getCurrentInstance()

            function listByCategory() {
                let cid = proxy.$refs.sideMenu.cid
                let url = 'categories/' + cid + '/books'
                proxy.$axios.get(url).then(resp => {
                    if (resp && resp.data.code === 200) {
                        proxy.$refs.booksArea.books = resp.data.result
                        proxy.$refs.booksArea.currentPage = 1
                    }
                })
            }

            return {
                listByCategory
            }
        }

    }
</script>

<style scoped>
    .books-area {
        width: 990px;
        margin-left: auto;
        margin-right: auto;
    }
</style>
